<template>
  <div style="width:100%;height:100%;" id="bgdrs"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'bgdrs',
    props: {
      bugReason: Array,
    },
    data() {
      return {};
    },
    methods: {
      init() {
        let bugReason = this.bugReason;
        let bugsMap = echarts.init(document.getElementById('bgdrs'));
        let option = {
          title: {
            text: 'SIT缺陷原因'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            left: 20,
            top: 70,
            textStyle : {
              fontSize : 14
            },
            data:[bugReason[0].datReasonName,bugReason[1].datReasonName,bugReason[2].datReasonName,bugReason[3].datReasonName]
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'left',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          series: [
            {
              name:'缺陷原因',
              type:'pie',
              radius : [50, 75],
              center : ['65%', '50%'],
              label:{            //饼图图形上的文本标签
                normal:{
                  show:true,
                  // position:'inner', //标签的位置
                  // textStyle : {
                  //   // fontWeight : 900 ,
                  //   color : '#000000',
                  //   fontSize : 14    //文字的字体大小
                  // },
                  // formatter: '{d}%'
                }
              },
              // labelLine: {
              //   normal: {
              //     show: false
              //   }
              // },
              data:[
                {
                  value:bugReason[0].datReasonCount,
                  name:bugReason[0].datReasonName,
                  itemStyle: {
                    normal: {
                      color:'#38b5ff',
                      label: {
                        show: bugReason[0].datReasonCount === '0' ? false : true,
                        formatter:'{d}%',
                        textStyle : {
                          fontWeight : 400 ,
                          fontSize : 16    //文字的字体大小
                        },
                      },
                      labelLine: {
                        show: bugReason[0].datReasonCount === '0' ? false : true,
                        smooth: 0.2,
                        length: 6,
                        length2: 10
                      },
                    }
                  },
                },
                {
                  value:bugReason[1].datReasonCount,
                  name:bugReason[1].datReasonName,
                  itemStyle: {
                    normal: {
                      color:'#af88ff',
                      label: {
                        show: bugReason[1].datReasonCount === '0' ? false : true,
                        formatter:'{d}%',
                        textStyle : {
                          fontWeight : 400 ,
                          fontSize : 16    //文字的字体大小
                        },
                      },
                      labelLine: {
                        show: bugReason[1].datReasonCount === '0' ? false : true,
                        smooth: 0.2,
                        length: 6,
                        length2: 10
                      },
                    }
                  },
                },
                {
                  value:bugReason[2].datReasonCount,
                  name:bugReason[2].datReasonName,
                  itemStyle: {
                    normal: {
                      color:'#ff9681',
                      label: {
                        show: bugReason[2].datReasonCount === '0' ? false : true,
                        formatter:'{d}%',
                        textStyle : {
                          fontWeight : 400 ,
                          fontSize : 16    //文字的字体大小
                        },
                      },
                      labelLine: {
                        show: bugReason[2].datReasonCount === '0' ? false : true,
                        smooth: 0.2,
                        length: 6,
                        length2: 10
                      },
                    }
                  },
                },
                {
                  value:bugReason[3].datReasonCount,
                  name:bugReason[3].datReasonName,
                  itemStyle: {
                    normal: {
                      color:'#8593fd',
                      label: {
                        show: bugReason[3].datReasonCount === '0' ? false : true,
                        formatter:'{d}%',
                        textStyle : {
                          fontWeight : 400 ,
                          fontSize : 16    //文字的字体大小
                        },
                      },
                      labelLine: {
                        show: bugReason[3].datReasonCount === '0' ? false : true,
                        smooth: 0.2,
                        length: 6,
                        length2: 10
                      },
                    }
                  },
                },
              ]
            },
          ]
        };
        bugsMap.setOption(option);
        window.addEventListener('resize', function () {
          bugsMap.resize();
        });
        bugsMap.on('click', (params) => {
          this.$Message.info('"'+params.name+'" 的'+params.seriesName+'个数为：'+params.value+' 个')
        });
      }
    },
    watch: {
      planData: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>
